<template>
  <div style="margin-top: 10px">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="search-card-title">Dictionaries Create</span>
        </div>
      </template>
      <el-form
        :inline="true"
        :model="createNew"
        class="demo-form-inline"
        ref="createNew"
      >
        <el-row>
          <el-form-item label="Category:" prop="category">
            <el-select
              style="width: 220px"
              v-model="createNew.category"
              allow-create
              filterable
              placeholder="please select category"
            >
              <el-option label="省份" value="province"></el-option>
              <el-option label="民族" value="nation"></el-option>
              <el-option label="权限" value="authority"></el-option>
              <el-option label="选项" value="option"></el-option>
            </el-select>
          </el-form-item>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <el-form-item
            label="Detail Title:"
            prop="value"
            v-if="createNew.category != ''"
          >
            <el-input
              style="width: 240px"
              v-model="createNew.value"
              placeholder="please inpute value"
            ></el-input>
          </el-form-item>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <el-form-item
            label="Code:"
            prop="code"
            v-if="createNew.category != ''"
          >
            <el-input
              style="width: 240px"
              v-model="createNew.code"
              placeholder="please inpute code"
            ></el-input>
          </el-form-item>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <el-form-item
            label="Description:"
            prop="description"
            v-if="createNew.category != ''"
          >
            <el-input
              style="width: 240px"
              v-model="createNew.description"
              placeholder="please inpute description"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col
            :span="6"
            :offset="18"
            style="text-align: end; padding-right: 10px"
          >
            <el-button type="primary" size="mini" @click="addForm(createNew)"
              >ADD</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="deleteDictionary(createNew.category)"
              >DELETE</el-button
            >
            <el-button type="info" size="mini" @click="resetForm('createNew')"
              >RESET</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <br />
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="search-card-title">Dictionaries Management</span>
        </div>
      </template>
      <el-card>
        <el-row>
          <el-col :span="4" class="tableManagement">
            <div>
              <div style="font-size: 18px; font-weight: 650">Category</div>
              <el-divider></el-divider>
              <el-menu
                default-active="0"
                class="el-menu-vertical-demo"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
              >
                <el-menu-item index="0">
                  <span slot="title" style="font-size: 17px">总类</span>
                </el-menu-item>
                <el-menu-item index="1">
                  <span slot="title" style="font-size: 17px">省份</span>
                </el-menu-item>
                <el-menu-item index="2">
                  <span slot="title" style="font-size: 17px">民族</span>
                </el-menu-item>
                <el-menu-item index="3">
                  <span slot="title" style="font-size: 17px">权限</span>
                </el-menu-item>
                <el-menu-item index="4">
                  <span slot="title" style="font-size: 17px">选项</span>
                </el-menu-item>
              </el-menu>
            </div>
          </el-col>
          <el-col :span="20" class="tableManagement">
            <div>
              <div style="font-size: 18px; font-weight: 650">
                Detail&nbsp;&nbsp;&nbsp;&nbsp;Description
              </div>
              <el-divider></el-divider>
              <div>
                <el-table :data="selection" stripe style="width: 100%" border>
                  <el-table-column
                    prop="number"
                    label="Number"
                    align="center"
                    width="90"
                  >
                  </el-table-column>
                  <el-table-column prop="value" label="Detail Title">
                  </el-table-column>
                  <el-table-column prop="code" label="Code"> </el-table-column>
                  <el-table-column prop="description" label="Description">
                  </el-table-column>
                  <el-table-column prop="createTime" label="Create Time">
                  </el-table-column>
                  <el-table-column prop="updateTime" label="Update Time">
                  </el-table-column>
                  <el-table-column label="Operations" width="230">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="success"
                        icon="el-icon-edit"
                        @click="handleUpdate(scope.$index, scope.row)"
                        >Update</el-button
                      >
                      <el-button
                        size="mini"
                        type="danger"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.$index, scope.row)"
                        >Delete</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
                <br />
                <el-pagination
                  :currentPage="pagination.currentPage"
                  :page-size="pagination.pageSize"
                  :page-sizes="[10, 50, 100, 200]"
                  layout="total, sizes, prev, pager, next"
                  :total="pagination.totalPages"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-card>
    <el-dialog
      title="Update Data Dictionaries"
      :visible.sync="dialogVisible"
      class="dialogStyle"
      width="600px"
    >
      <div>
        <el-form ref="form" :model="form" label-width="130px">
          <el-form-item label="Detail Title:">
            <el-input v-model="form.value"></el-input>
          </el-form-item>
          <el-form-item label="Code:">
            <el-input v-model="form.code"></el-input>
          </el-form-item>
          <el-form-item label="Decription:">
            <el-input v-model="form.description"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateDialog()">update</el-button>
        <el-button @click="dialogVisible = false">cancel</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      createNew: {
        category: "",
        value: "",
        code: "",
        description: "无",
      },
      form: {
        value: "",
        code: "",
        description: "",
      },
      selection: [],
      dialogVisible: false,
      pagination: {
        currentPage: 1,
        pageSize: 10,
        totalPages: 10,
      },
      tableData0: [
        {
          number: 1,
          value: "省份",
          code: "province",
          description: "无",
          createTime: "2022-05-20 14:23:36",
          updateTime: "2022-05-20 14:23:36",
        },
        {
          number: 2,
          value: "民族",
          code: "nations",
          description: "无",
          createTime: "2022-05-20 14:23:36",
          updateTime: "2022-05-20 14:23:36",
        },
        {
          number: 3,
          value: "权限",
          code: "authority",
          description: "无",
          createTime: "2022-05-20 14:23:36",
          updateTime: "2022-05-20 14:23:36",
        },
        {
          number: 4,
          value: "选项",
          code: "options",
          description: "无",
          createTime: "2022-05-20 14:23:36",
          updateTime: "2022-05-20 14:23:36",
        },
      ],
      tableData1: [
        {
          number: 1,
          value: "山东省",
          code: "shandong",
          description: "无",
          createTime: "2022-05-20 14:23:36",
          updateTime: "2022-05-20 14:23:36",
        },
        {
          number: 2,
          value: "陕西省",
          code: "shanxi",
          description: "无",
          createTime: "2022-05-20 14:23:36",
          updateTime: "2022-05-20 14:23:36",
        },
        {
          number: 3,
          value: "河南省",
          code: "henan",
          description: "无",
          createTime: "2022-05-20 14:23:36",
          updateTime: "2022-05-20 14:23:36",
        },
        {
          number: 4,
          value: "广西省",
          code: "guangxi",
          description: "无",
          createTime: "2022-05-20 14:23:36",
          updateTime: "2022-05-20 14:23:36",
        },
        {
          number: 5,
          value: "甘肃省",
          code: "gansu",
          description: "无",
          createTime: "2022-05-20 14:23:36",
          updateTime: "2022-05-20 14:23:36",
        },
        {
          number: 6,
          value: "湖南省",
          code: "hunan",
          description: "无",
          createTime: "2022-05-20 14:23:36",
          updateTime: "2022-05-20 14:23:36",
        },
      ],
      tableData2: [
        {
          number: 1,
          value: "汉族",
          code: "汉",
          description: "无",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
        {
          number: 2,
          value: "朝鲜族",
          code: "chaoxian",
          description: "无",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
        {
          number: 3,
          value: "满族",
          code: "man",
          description: "无",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
        {
          number: 4,
          value: "维吾尔族",
          code: "weiwuer",
          description: "无",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
        {
          number: 5,
          value: "回族",
          code: "hui",
          description: "无",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
        {
          number: 6,
          value: "傣族",
          code: "dai",
          description: "无",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
      ],
      tableData3: [
        {
          number: 1,
          value: "结论分析",
          code: "resultAnalysis",
          description: "/dataAnalysis/resultAnalysis",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
        {
          number: 2,
          value: "问卷分析",
          code: "questionnaireAnalysis",
          description: "/dataAnalysis/questionnaireAnalysis",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
        {
          number: 3,
          value: "问卷库",
          code: "questionnaireDatabase",
          description: "/questionnaireManagement/questionnaireDatabase",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
        {
          number: 4,
          value: "问卷审核",
          code: "questionnaireReview",
          description: "/questionnaireManagement/questionnaireReview",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
        {
          number: 5,
          value: "个人问卷",
          code: "personalQuestionnaires",
          description: "/questionnaireManagement/personalQuestionnaires",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
        {
          number: 6,
          value: "新建问卷",
          code: "newQuestionnaire",
          description: "/questionnaireManagement/newQuestionnaire",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
        {
          number: 7,
          value: "用户管理",
          code: "userManagement",
          description: "/systemManagement/userManagement",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
        {
          number: 8,
          value: "数据字典",
          code: "dataDictionary",
          description: "/systemManagement/dataDictionary",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
        {
          number: 9,
          value: "角色管理",
          code: "roleManagement",
          description: "/systemManagement/roleManagement",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
        {
          number: 10,
          value: "查看问卷",
          code: "questionnaireDetail",
          description: "/questionnaireManagement/questionnaireDetail",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
        {
          number: 11,
          value: "角色信息",
          code: "userDetail",
          description: "/systemManagement/userDetail",
          createTime: "2021-11-03 20:53:16",
          updateTime: "2021-11-03 20:53:16",
        },
      ],
      tableData4: [
        {
          number: 1,
          value: "杨一",
          code: "yangyi",
          description: "auditor",
          createTime: "2022-05-20 14:23:36",
          updateTime: "2022-05-20 14:23:36",
        },
        {
          number: 2,
          value: "赵亦",
          code: "zhaoyi",
          description: "auditor",
          createTime: "2022-05-20 14:23:36",
          updateTime: "2022-05-20 14:23:36",
        },
        {
          number: 3,
          value: "用户",
          code: "user",
          description: "role",
          createTime: "2022-05-20 14:23:36",
          updateTime: "2022-05-20 14:23:36",
        },
        {
          number: 4,
          value: "审核员",
          code: "auditor",
          description: "role",
          createTime: "2022-05-20 14:23:36",
          updateTime: "2022-05-20 14:23:36",
        },
        {
          number: 5,
          value: "管理员",
          code: "administrator",
          description: "role",
          createTime: "2022-05-20 14:23:36",
          updateTime: "2022-05-20 14:23:36",
        },
      ],
    };
  },
  mounted() {
    this.selection = this.tableData0;
  },
  methods: {
    handleSelect(key, keyPath) {
      if (key == 0) {
        this.selection = this.tableData0;
      }
      if (key == 1) {
        this.selection = this.tableData1;
      }
      if (key == 2) {
        this.selection = this.tableData2;
      }
      if (key == 3) {
        this.selection = this.tableData3;
      }
      if (key == 4) {
        this.selection = this.tableData4;
      }
      console.log(key, keyPath);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleUpdate(index, row) {
      this.form.value = row.value;
      this.form.code = row.code;
      this.form.description = row.description;
      console.log(index, row);
      this.dialogVisible = true;
    },
    //删除问卷
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //删除字典
    deleteDictionary(value) {
      console.log(value);
      this.$confirm("此操作将永久此类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    updateDialog() {
      this.$message({
        type: "success",
        message: "修改成功!",
      });
      this.dialogVisible = false;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    addForm(formName) {
      //搜索表单信息
      console.log(formName);
    },
  },
};
</script>

<style scoped lang="scss">
.box-card {
  width: 90%;
  background: rgba(148, 185, 228, 0.062);
  border-radius: 8px;
  text-align: center;
  margin: auto;
}
.card-header {
  color: #080808;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-card-title {
  font-size: 16px;
  font-weight: 600;
}
.el-card /deep/.el-card__header {
  background-color: #64bbe742;
  padding: 6px;
}
.tableManagement.el-col {
  border: 22px solid transparent;
}
</style>